<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../css/metroStyle/metroStyle.css">
<script src="../../layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jquery.ztree.all.js"></script>
<script src="../../js/vue.js"></script>
<body>
<div id="story">
<input type="hidden" name="glId" id="glId" :value="garden_list.glId">
<input type="hidden" :value="garden_list.glName" id="gradeName">
<div class="layui-fluid">

    <div class="layui-row">
        <div class="layui-col-sm2" style="margin-left: 30px;margin-right: 30px;margin-top: 45px;">
            <h2>班级和学生</h2>
            <hr>
            <ul id="treeDemo" class="ztree"></ul>
            <hr>
        </div>
        <div class="layui-col-sm8" style="margin-top: 20px;">
            <div class="layui-row">
               <!-- <div style="margin-left: 30px;"> <h4><span id="childName">007-比海盗</span>已选的费项</h4></div>-->
                <hr/>
                <table class="layui-hide" id="selectedfxList" lay-filter="selectedfxList"></table>
            </div>
            <div class="layui-row">
                <div style="margin-left: 40px;">
                    <form action="" class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="width: 800px;">
                                <label class="layui-form-label" style="width: 100px;">费项开始年月</label>
                                <div class="layui-input-inline" style="float: left;">
                                    <input type="text" id="dYesrs" name="dYesrs" class="layui-input">
                                </div>
                                <div class="layui-form-mid" style="margin-left: 30px;">-</div>
                                <label class="layui-form-label" style="width: 100px;">费项结束年月</label>
                                <div class="layui-input-inline" style="float: left;">
                                    <input type="text" id="eYears" name="eYears" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <hr/>

                <table class="layui-hide" id="fxInfoList" lay-filter="fxInfoList"></table>
            </div>

        </div>

    </div>

</div>
</div>
<script>
    layui.config({
        base: '../../layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    })
</script>
<script language="JavaScript">
    var table ;
    var zTreeObj;
    var roleId = 1;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check : {
            enable : true
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    $(document).ready(function(){
            $.get("http://localhost:9999/Manage/manageAndChildAll?glId="+$("#glId").val(),function (zNodes) {
                zNodes.data[0]['open']=true;
                treeNodedata = zNodes.data;
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes.data);
            });
    });
    function zTreeOnClick(event,treeId,treeNode){
        var a = treeNode.pid;
        var b = treeNode.pName;
        var c = treeNode.cmId;

        if (a == undefined && b == undefined){
            /*alert("Sdf");*/
            $.get('http://localhost:9999/Unselectedcharge/unselectedInfo',{cmId:c,pid:a,glId:$("#glId").val()},function (data) {
                table.render({
                    elem: '#fxInfoList'
                    ,toolbar:"#toolbarDemo"
                    ,even : true
                    ,data: data.data.fxinfos
                    ,cols: [[
                        {field:'hello',type:'checkbox'}
                        ,{field:'cIid', title: '编号'}
                        ,{field:'ciName', title: '费项名称'}
                        ,{field:'typesid',  title: '费项类型',templet:function (d) {
                                if (d.typesid == 1){
                                    return '常规费项';
                                }
                                if (d.typesid == 2){
                                    return '便捷费项';
                                }
                            }}

                        ,{field:'price', title: '收费方式'}
                        ,{field:'company', title: '单位', sort: true}
                    ]]
                });
               /* console.log(treeNode.cmName);*/

               table.render({
                    elem: '#selectedfxList'
                    ,data: data.data.selectedchargesList
                    ,page: false
                    ,even : true
                    ,id : "selectedfxList"
                    ,toolbar:"#toolbarDemo2",
                    defaultToolbar: []
                  ,cols: [[
                        {field:'hello',type:'checkbox',hide:true}
                        ,{field:'fxinfo',  title: '编号',templet:function (d) {
                                return d.fxinfo.cIid
                            },hide:true}
                        ,{field:'fxinfo',  title: '费项名称',templet:function (d) {
                                return d.fxinfo.ciName
                            },hide:true}
                        ,{field:'fxinfo',  title: '费项类型',templet:function (d) {
                                if (d.fxinfo.typesid == 1){
                                    return '常规费项';
                                }
                                if (d.fxinfo.typesid == 2){
                                    return '便捷费项';
                                }
                            },hide:true}

                        ,{field:'fxinfo',  title: '收费单价',templet:function (d) {
                                return d.fxinfo.price
                            },hide:true}
                        ,{field:'fxinfo',  title: '单位',templet:function (d) {
                                return d.fxinfo.company
                            },hide:true}
                        ,{field:'dYesrs', title: '开始年月',hide:true}
                        ,{field:'eYears', title: '结束年月',hide:true}
                    ]]
                });
                $("#childName").text(treeNode.cmName);
            })

        }else {

            $.get('http://localhost:9999/Unselectedcharge/unselectedInfo',{cmId:c,pid:a,glId:$("#glId").val()},function (data) {
                table.render({
                    elem: '#fxInfoList'
                    ,toolbar:"#toolbarDemo"
                    ,even : true
                    ,data: data.data.unselectedchargesList
                    ,cols: [[
                        {field:'hello',type:'checkbox'}
                        ,{field:'fxinfo',  title: '编号',templet:function (d) {
                               return d.fxinfo.cIid
                            }}
                        ,{field:'fxinfo',  title: '费项名称',templet:function (d) {
                                return d.fxinfo.ciName
                            }}
                        ,{field:'fxinfo',  title: '费项类型',templet:function (d) {
                                if (d.fxinfo.typesid == 1){
                                    return '常规费项';
                                }
                                if (d.fxinfo.typesid == 2){
                                    return '便捷费项';
                                }
                            }}
                        ,{field:'fxinfo',  title: '收费单价',templet:function (d) {
                                return d.fxinfo.price
                            }}
                        ,{field:'fxinfo',  title: '单位',templet:function (d) {
                                return d.fxinfo.company
                            }},
                    ]]
                });
                table.render({
                    elem: '#selectedfxList'
                    ,data: data.data.selectedchargesList
                    ,page: false
                    ,even : true
                    ,id : "selectedfxList"
                    ,toolbar:"#toolbarDemo2",
                    defaultToolbar: []
                    ,cols: [[
                        {field:'hello',type:'checkbox'}
                        ,{field:'fxinfo',  title: '编号',templet:function (d) {
                                return d.fxinfo.cIid
                            }}
                        ,{field:'fxinfo',  title: '费项名称',templet:function (d) {
                                return d.fxinfo.ciName
                            }}
                        ,{field:'fxinfo',  title: '费项类型',templet:function (d) {
                                if (d.fxinfo.typesid == 1){
                                    return '常规费项';
                                }
                                if (d.fxinfo.typesid == 2){
                                    return '便捷费项';
                                }
                            }}

                        ,{field:'fxinfo',  title: '收费单价',templet:function (d) {
                                return d.fxinfo.price
                            }}
                        ,{field:'fxinfo',  title: '单位',templet:function (d) {
                                return d.fxinfo.company
                            }}
                        ,{field:'dYesrs', title: '开始年月'}
                        ,{field:'eYears', title: '结束年月'}
                    ]]
                });
                $("#childName").text(treeNode.pid+"-"+treeNode.pName);
            })
        }
    }

</script>
<script>

    layui.use(['table','form','formSelects','laydate'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;
        var laydate = layui.laydate;
        $.get('http://localhost:9999/Unselectedcharge/unselectedInfo',{glId:$("#glId").val()},function (data) {
        table.render({
            elem: '#fxInfoList'
            ,data: data.data.fxinfos
            ,page: false
            ,even : true
            ,id : "fxInfoList"
            ,toolbar:"#toolbarDemo",
            defaultToolbar: []
            ,cols: [[
                {field:'hello',type:'checkbox'}
                ,{field:'cIid', title: '编号'}
                ,{field:'ciName', title: '费项名称'}
                ,{field:'typesid',  title: '费项类型',templet:function (d) {
                    if (d.typesid == 1){
                        return '常规费项';
                    }
                        if (d.typesid == 2){
                            return '便捷费项';
                        }
                    }}

                ,{field:'price', title: '收费方式'}
                ,{field:'company', title: '单位', sort: true}
            ]]
        });
            table.render({
                elem: '#selectedfxList'
                ,data: data.data.selectedchargesList
                ,page: false
                ,even : true
                ,id : "selectedfxList"
                ,toolbar:"#toolbarDemo2",
                defaultToolbar: []
                ,cols: [[
                    {field:'hello',type:'checkbox'}
                    ,{field:'fxinfo',  title: '编号',templet:function (d) {
                            return d.fxinfo.cIid
                        }}
                    ,{field:'fxinfo',  title: '费项名称',templet:function (d) {
                            return d.fxinfo.ciName
                        }}
                    ,{field:'fxinfo',  title: '费项类型',templet:function (d) {
                            if (d.fxinfo.typesid == 1){
                                return '常规费项';
                            }
                            if (d.fxinfo.typesid == 2){
                                return '便捷费项';
                            }
                        }}

                    ,{field:'fxinfo',  title: '收费单价',templet:function (d) {
                            return d.fxinfo.price
                        }}
                    ,{field:'fxinfo',  title: '单位',templet:function (d) {
                            return d.fxinfo.company
                        }}
                    ,{field:'dYesrs', title: '开始年月'}
                    ,{field:'eYears', title: '结束年月'}
                ]]
            });
        })
        //头工具栏事件
        var pidd='';
        var clidd='';
        var start = '';
        var end = '';
        table.on('toolbar(fxInfoList)', function(obj){
            var h = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchadd':
                    var nodes = zTreeObj.getCheckedNodes();

                    if (h.data.length == 0){
                        layer.msg('请选择费项',{time:1000,anim: 6},function () {
                            return;
                        })
                    }
                    if (nodes.length == 0){
                        layer.msg('请选择幼儿',{time:1000,anim: 6},function () {
                            return;
                        })
                        return;
                    }
                    if (h.data.length != 0 && nodes.length != 0){
                        pidd='';
                        clidd='';
                       for (let i = 0; i < nodes.length; i++) {
                            pidd=pidd+nodes[i].pid;
                           if (i <nodes.length-1){
                               pidd=pidd+','
                           }
                           if (pidd == 'undefined,'){
                               pidd='';
                           }
                        }
                        for (let i = 0; i < h.data.length; i++) {
                            clidd=clidd+h.data[i].cIid;
                            if (i<h.data.length-1){
                                clidd=clidd+',';
                            }
                        }
                        start = $("#dYesrs").val();
                        end = $("#eYears").val();
                        $.get('http://localhost:9999/Unselectedcharge/deleteUnselected',{dYesrs:start,eYears:end,pid1:pidd,cIid1:clidd},function () {
                            layer.msg('添加成功',{time:500,anim: 3},function () {
                                location.reload(true);
                               /* table.render({
                                    elem: '#fxInfoList'
                                })*/
                                table.reload('selectedfxList', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                })

                                /*table.reload('selectedfxList');*/
                            })
                        })

                    }

                    break;
                case 'del':
                    alert("sdf");
                    break;
            };
        });

        table.on('toolbar(selectedfxList)', function(obj){
            var h = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'del':
                    var nodes = zTreeObj.getCheckedNodes();
                    if (h.data.length == 0){
                        layer.msg('请选择费项',{time:1000,anim: 6},function () {
                            return;
                        })
                    }
                    if (nodes.length == 0){
                        layer.msg('请选择幼儿',{time:1000,anim: 6},function () {
                            return;
                        })
                        return;
                    }
                    if (h.data.length != 0 && nodes.length != 0){
                        pidd='';
                        clidd='';
                        for (let i = 0; i < nodes.length; i++) {
                            pidd=pidd+nodes[i].pid;
                            if (i <nodes.length-1){
                                pidd=pidd+','
                            }
                            if (pidd == 'undefined,'){
                                pidd='';
                            }
                        }
                        for (let i = 0; i < h.data.length; i++) {
                            clidd=clidd+h.data[i].cIid;
                            if (i<h.data.length-1){
                                clidd=clidd+',';
                            }
                        }
                      $.get('http://localhost:9999/Unselectedcharge/deleteselected',{pid1:pidd,cIid1:clidd},function () {
                            layer.msg('删除成功',{time:500,anim: 3},function () {
                                location.reload(true);
                               /* table.render({
                                     elem: '#fxInfoList'
                                 })

                               table.reload('selectedfxList');*/
                            })
                        })

                    }

                    break;
            };
        });


    });

    var vm = new Vue({
        el:'#story',
        data:{
            garden_list:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.garden_list = User_PermissionData.kmsUser.garden_list;
        },
    })

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

<!--<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="lock" value="{{d.available}}" title="启用" lay-filter="roleTable" {{ d.available == 1 ? 'checked' : '' }}>
</script>-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" style="color: black;background-color: rgba(255,255,255,0);font-size: 16px;">未选的费项-项目</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchadd">添加</button>
        <!-- <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>-->
       <!-- <button class="layui-btn layui-btn-sm" lay-event="import">批量导入</button>-->
    </div>
</script>

<script type="text/html" id="toolbarDemo2">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" style="color: black;background-color: rgba(255,255,255,0);font-size: 16px;"><span id="childName">007-比海盗</span>已选的费项</h4></button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
        <!-- <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>-->
        <!-- <button class="layui-btn layui-btn-sm" lay-event="import">批量导入</button>-->
    </div>
</script>
<script src="../../js/laydate.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;


        laydate.render({
            elem: '#dYesrs'
        });
        laydate.render({
            elem: '#eYears'
        });
    });
</script>
</body>
</html>